<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    >
      <template v-if="meta.indexOf('ScOrderListExport') > -1" #btns>
        <el-button :loading="exportLoading" type="primary" @click="exportExcel">导出</el-button>
      </template>
    </QueryForm>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="订单号"
        show-overflow-tooltip
        prop="orderId"
        min-width="200"
      >
        <template v-if="meta.indexOf('ScOrderDetail') > -1" v-slot="scope">
          <span class="ckxqBtn" @click="handleDetail(scope.row.orderId)">{{
            scope.row.orderId
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="会员消息"
        show-overflow-tooltip
        min-width="140"
        prop="memberInfo"
      />
      <el-table-column
        align="center"
        label="关联内容"
        show-overflow-tooltip
        prop="info"
        min-width="200"
      />
      <el-table-column
        align="center"
        label="类型"
        show-overflow-tooltip
        prop="typeName"
        min-width="130"
      />
      <el-table-column
        align="center"
        label="订单合计(元)"
        prop="price"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        align="center"
        label="交易方式"
        show-overflow-tooltip
        prop="pathMethodName"
        min-width="120"
      />
      <el-table-column
        align="center"
        label="交易渠道"
        show-overflow-tooltip
        prop="channelName"
        min-width="120"
      >
        <!-- <template slot-scope="scope">
          {{
            scope.row.channel == "01"
              ? "小程序"
              : scope.row.channel == "02"
                ? "场馆PC端": ""
          }}
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        label="操作员"
        show-overflow-tooltip
        prop="createName"
        min-width="120"
      />
      <el-table-column
        align="center"
        label="创建时间"
        show-overflow-tooltip
        min-width="160"
        prop="createTime"
      />
      <el-table-column align="center" label="状态" fixed="right" min-width="100" prop="payStatusName">
        <!-- <template slot-scope="scope">
          {{
            scope.row.payStatus == "0"
              ? "待支付"
              : scope.row.payStatus == "1"
                ? "超时未支付"
                : scope.row.payStatus == "2"
                  ? "取消支付":
                    scope.row.payStatus == "3"
                      ? "支付成功":
                        scope.row.payStatus == "4"
                          ? "退款中":
                            scope.row.payStatus == "5"
                              ? "退款成功": ""
          }}
        </template> -->
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.payStatus == 0 && meta.indexOf('ScOrderContinuePay') > -1"
              v-preventReClick
              type="text"
              @click="continuePay(scope.row.orderId)"
            >支付</el-button>
            <el-button
              v-if="scope.row.payStatus == 0 && meta.indexOf('ScOrderCancelPay') > -1"
              v-preventReClick
              type="text"
              class="red"
              @click="canclePayOrder(scope.row.orderId)"
            >取消支付</el-button>
            <el-button
              v-if="scope.row.payStatus == 3"
              v-preventReClick
              type="text"
              @click="printOrder(scope.row.orderId)"
            >打印小票</el-button>
            <span v-if="scope.row.payStatus != 0 && scope.row.payStatus != 3">-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <orderDialog ref="child" @orderSuccess="getList()" />
    <orderDetail ref="orderDetail" />
  </div>
</template>

<script>
import {
  printOrder,
  serviceOrderCancelPay,
  serviceOrderContinuePay,
  serviceOrderList,
  serviceOrderListExport
} from '@/api'
import { parseTime } from '@/utils/index'
import orderDialog from '@/components/order'
import orderDetail from './detail.vue'
import { queryFormConfig } from './config'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'HandlingFees',
  components: {
    orderDialog,
    orderDetail,
    QueryForm
  },
  data() {
    return {
      totalCount: 0,
      exportLoading: false,
      queryFormConfig,
      list: [],
      meta: [],
      filters: {
        time: []
      },
      listLoading: true,
      orderType: [],
      pagination: {
        page: 1,
        rows: 10
      },
      orderMessgae: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    if (this.$route.query.renovate) {
      this.getList(1)
    }
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    handleDetail(id) {
      this.$refs.orderDetail.getOrderDetail(id)
    },
    exportExcel() {
      this.exportLoading = true
      const { filters } = this
      if (filters.time && filters.time.length > 0) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = null
        filters.endTime = null
      }
      serviceOrderListExport({
        param: { ...filters }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    // 获取列表
    getList(page) {
      const { filters, pagination } = this
      if (filters.time && filters.time.length > 0) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = null
        filters.endTime = null
      }
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      serviceOrderList({
        pagination,
        param: { ...filters }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch((err) => {
          console.log(err)
          this.listLoading = false
        })
    },
    // 清空
    clear() {
      this.filters = { time: [] }
      this.getList(1)
    },
    // 打印小票
    printOrder(orderId) {
      this.$confirm('此操作将打印小票, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          printOrder({
            param: {
              contentMap: {},
              venueId: sessionStorage.getItem('venueId'),
              workId: orderId,
              templateCode: 'SERVICE_CHARGE_ORDER'
            }
          })
            .then((res) => {
              console.log(res)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          // this.$message.info('操作已取消')
        })
    },
    // 取消支付
    canclePayOrder(orderId) {
      const that = this
      this.$confirm('此操作将取消购买, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          serviceOrderCancelPay({ param: { orderId }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('取消成功')
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    // 继续支付
    continuePay(orderId) {
      serviceOrderContinuePay({
        param: {
          orderId: orderId,
          venueId: sessionStorage.getItem('venueId')
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            const obj = res.record
            obj.goodsInfos = obj.serviceChargeOrderInfo
            obj.allPrice = obj.price
            this.$refs.child.continuePay(obj, 'handlingFees')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
